<script setup lang="ts">
  import { tableHeaderCellStyle } from '@/utils/tools'
  import { CaretBottom, CaretRight } from '@element-plus/icons-vue'
  import AddParts from '../ApplyPart/index.vue'
  import CheckParts from '@/views/order/parts/components/CheckParts.vue'
  import { ref } from 'vue'
  import { getOrderDetailWorkSpareList } from '@/api/parts'
  import PartsDetail from '@/views/order/parts/components/PartsDetail.vue'
  import { Part } from './types'
  import HPlainButton from '@/components/common/button/HPlainButton.vue'
  import HStatus from '@/components/common/status/HStatus.vue'
  import HLink from '@/components/common/link/HLink.vue'

  const props = defineProps({
    orderId: {
      type: String,
      required: true,
    },
    showAddServiceFeeWidthSpare: {
      type: Boolean,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'updated'): void
  }>()

  // 新增配件费用弹窗状态
  const addPartsModalVisible = ref(false)

  // 分页配置
  const pagination = ref({
    limit: 4,
    page: 1,
  })

  // 配件列表
  const tableData = ref<Array<Part>>([])

  // 表格总条数
  const total = ref(0)

  // 配件
  const getOrderMaterials = async () => {
    const res = await getOrderDetailWorkSpareList(pagination.value, props.orderId)
    tableData.value = res.data.data.rows
    total.value = Number(res.data.data.total)
    if (total.value >= 1) {
      activeNames.value.push('parts')
    }
  }

  // 配件id
  const partsId = ref('')

  // 配件审核弹窗状态
  const checkPartsModalVisible = ref(false)

  // 配件审核事件
  const handlePartCheck = (id: string) => {
    partsId.value = id
    checkPartsModalVisible.value = true
  }

  // 配件详情弹窗状态
  const partsDetailModalVisible = ref(false)

  // 查看费用详细
  const handleViewPartsDetail = (n: string) => {
    partsDetailModalVisible.value = true
    partsId.value = n
  }

  // 打开的面板
  const activeNames = ref([''])

  /**
   * 更新事件
   */
  const onUpdated = () => {
    getOrderMaterials()
    emits('updated')
  }

  defineExpose({
    getOrderMaterials,
  })
</script>

<template>
  <div>
    <el-collapse v-model="activeNames">
      <el-collapse-item name="parts">
        <template #title>
          <div
            style="
              box-sizing: border-box;
              padding: 0 16px;
              display: flex;
              align-items: center;
              gap: 5px;
            "
          >
            <el-icon>
              <template v-if="activeNames.includes('parts')">
                <CaretBottom />
              </template>
              <template v-else>
                <CaretRight />
              </template>
            </el-icon>
            <span>工单配件</span>

            <!--@click.stop=""是为了解决点击申请费用按钮会展开面板-->
            <AddParts
              @click.stop=""
              :workId="props.orderId"
              :partId="partsId"
              @assign-dialog="addPartsModalVisible = false"
              @update-list="onUpdated"
            >
              <HPlainButton
                :padding-lr="6"
                :height="22"
                @click="addPartsModalVisible = true"
                v-if="showAddServiceFeeWidthSpare"
              >
                申请配件
              </HPlainButton>
            </AddParts>
          </div>
        </template>
        <div style="box-sizing: border-box; padding: 0 16px">
          <el-table
            border
            resizable
            :data="tableData"
            stripe
            style="width: 100%"
            row-key="id"
            :header-cell-style="tableHeaderCellStyle"
          >
            <template #empty>
              <el-empty description="暂无数据" :image-size="120" />
            </template>

            <!-- 序号 -->
            <el-table-column show-overflow-tooltip label="序号" fixed="left" min-width="50">
              <template v-slot="i">
                {{ i.$index + 1 }}
              </template>
            </el-table-column>

            <!-- 操作 -->
            <el-table-column label="操作" width="100" fixed="left">
              <template #default="scope">
                <div class="ord_dis">
                  <HLink
                    type="warning"
                    v-if="scope.row.status == 1"
                    @click="handlePartCheck(scope.row.id)"
                    >审核</HLink
                  >
                  <HLink disabled type="info" v-else>审核</HLink>
                </div>
              </template>
            </el-table-column>

            <!-- 配件单号 -->
            <el-table-column
              show-overflow-tooltip
              fixed="left"
              prop="code"
              label="配件单号"
              min-width="170"
            >
              <template #default="scope">
                <span class="number" @click="handleViewPartsDetail(scope.row.id)">
                  {{ scope.row.code }}
                </span>
              </template>
            </el-table-column>

            <!-- 状态 -->
            <el-table-column prop="state" label="状态" width="83">
              <template #default="scope">
                <HStatus type="warning" v-if="scope.row.status === 1">待审核</HStatus>
                <HStatus type="success" v-if="scope.row.status === 2">已通过</HStatus>
                <HStatus type="error" v-if="scope.row.status === 3">已驳回</HStatus>
                <HStatus type="warning" v-if="scope.row.status === 4">已撒回</HStatus>
                <HStatus type="info" v-if="scope.row.status === 5">已取消</HStatus>
              </template>
            </el-table-column>

            <!-- 申请类型 -->
            <el-table-column show-overflow-tooltip prop="type" label="申请类型" width="100" />

            <!-- 配件名称 -->
            <el-table-column show-overflow-tooltip prop="model" label="配件名称" width="200" />

            <!-- 旧件处理方式 -->
            <el-table-column show-overflow-tooltip label="旧件处理方式" width="100">
              <template #default="scope">
                {{
                  scope.row.oldCopeWay == 1 ? '废弃' : scope.row.oldCopeWay == 2 ? '旧件退回' : ''
                }}
              </template>
            </el-table-column>

            <!-- 申请人员 -->
            <el-table-column show-overflow-tooltip prop="applyEmp" label="申请人员" width="120" />

            <!-- 申请服务商 -->
            <el-table-column show-overflow-tooltip prop="network" label="申请服务商" width="150" />

            <!-- 申请时间 -->
            <el-table-column show-overflow-tooltip prop="createTime" label="申请时间" width="150" />

            <!-- 支付服务商总费用 -->
            <el-table-column
              show-overflow-tooltip
              prop="payNetworkTotalPrice"
              label="支付服务商总费用"
              width="150"
            >
              <template #default="scope">
                ￥{{ (scope.row.payNetworkTotalPrice || 0).toFixed(2) }}
              </template>
            </el-table-column>

            <!-- 向商家收取总费用 -->
            <el-table-column
              show-overflow-tooltip
              prop="receiveFactoryTotalPrice"
              label="向商家收取总费用"
              width="150"
            >
              <template #default="scope">
                ￥{{ (scope.row.receiveFactoryTotalPrice || 0).toFixed(2) }}
              </template>
            </el-table-column>

            <!-- 平台承担总费用 -->
            <el-table-column
              show-overflow-tooltip
              prop="totalPrice"
              label="平台承担费用单价"
              width="150"
            >
              <template #default="scope"> ￥{{ (scope.row.totalPrice || 0).toFixed(2) }} </template>
            </el-table-column>

            <!-- 审核人员 -->
            <el-table-column show-overflow-tooltip prop="reviewEmp" label="审核人员" width="120" />

            <!-- 审批时间 -->
            <el-table-column show-overflow-tooltip prop="reviewTime" label="审批时间" width="150" />
          </el-table>
          <div style="margin-top: 12px; display: flex; justify-content: flex-end">
            <el-pagination
              layout="total, prev, pager, next, jumper"
              :total="total"
              background
              :page-size="4"
              v-model:current-page="pagination.page"
              @current-change="getOrderMaterials"
            />
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>

    <!-- 审核配件 -->
    <CheckParts
      :workId="props.orderId"
      :checkDialog="checkPartsModalVisible"
      :partsId="partsId"
      @assign-dialog="checkPartsModalVisible = false"
      @update-list="onUpdated"
    />

    <!-- 查看详细弹出框 -->
    <PartsDetail
      :partsId="partsId"
      :checkDialog="partsDetailModalVisible"
      @assign-dialog="partsDetailModalVisible = false"
    />
  </div>
</template>
<style lang="scss">
  .check_btn {
    color: #e69103;
    cursor: pointer;
    &:hover {
      text-decoration: underline;
    }
  }
</style>
